<template>
	<view>
		<view class="tab_div">
			<view class="tab_item" @click.stop="onSelStatus('')">
				<view :class="curr_tab == '' ? 'tab_txt_sel' : 'tab_txt'">全部</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('-1')">
				<view :class="curr_tab == '-1' ? 'tab_txt_sel' : 'tab_txt'">待审核</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('1')">
				<view :class="curr_tab == '1' ? 'tab_txt_sel' : 'tab_txt'">已通过</view>
			</view>
			<view class="tab_item" @click.stop="onSelStatus('2')">
				<view :class="curr_tab == '2' ? 'tab_txt_sel' : 'tab_txt'">已拒绝</view>
			</view>
		</view>

		<view style="width: 100%;height: 1rpx;background-color: #eee;"></view>

		<view v-for="(item,index) in apply_list" :key="item.id" class="truck_item">
			<view class="div_item">
				<view>用户名 <span>{{item.username || '--'}}</span></view>
				<view>昵称<span>{{item.nickname || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>当前状态<span>{{getStatusTxt(item.audit) || '--'}}</span></view>
				<view>创建时间<span>{{ timestampToDateFormat(item.createtime) || '--'}}</span></view>
			</view>

			<!-- 底部操作菜单 -->
			<view v-if="item.audit == '-1'" class="op_menu_div">
				<view class="btn_share" @click.stop="onApply(item,1)">通过</view>
				<view class="btn_share" @click.stop="onApply(item,2)">拒绝</view>
			</view>
			<!-- 底部无操作菜单时的占位布局 -->
			<view v-else style="padding: 14rpx 14rpx 4rpx 4rpx;"></view>

		</view>

		<view v-if="!apply_list || apply_list.length <= 0" style="width: 100%;text-align: center;margin: 10vh 0 0 0;">
			暂无数据~
		</view>

	</view>
</template>

<script>
	import { getUInfo, getStatusTxt, timestampToDateFormat } from '@/util/util.js'
	export default {
		data() {
			return {
				apply_list: [], // 运费申请列表
				curr_tab: '', // 记录当前选择的tab代表的状态
			}
		},

		mounted() {
			let that = this
			this.getApplyList()

			// 事件总线:收到重新申请车费的消息
			uni.$on('onReApplyFreight', data => {
				console.log('监听到事件来自onReApplyFreight,携带参数 data =', data);
				that.getApplyList()
			})
		},

		methods: {

			// -1 未审核 1 通过 2 拒绝 不传为全部
			onSelStatus(status) {
				this.curr_tab = status
				// this.$toast(status)
				this.getApplyList()
			},

			// 1 通过 2 拒绝
			onApply(item, type) {
				let that = this
				let content = `是否${(type == 1) ? '通过' : '拒绝'}该会员的注册申请？`
				uni.showModal({
					title: '提示',
					content,
					success: res => {
						if (res.confirm) {
							that.postExeAudit(item.id, type)
						}
					}
				})

			},

			// 接口:审批列表
			async getApplyList() {
				let that = this
				let token = getUInfo().token
				let audit = that.curr_tab
				uni.showLoading({ title: '处理中', mask: true, })
				let res = await this.$audit_list({ token, audit })
				// console.log('getApplyList.res =', res);
				if (res.code == 1) {
					this.apply_list = res.data
				} else {
					this.$toast(res.msg)
				}
			},

			// 接口:执行审核 
			async postExeAudit(id, audit) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '处理中', mask: true, })
				let res = await this.$audit({ token, id, audit })
				// console.log('postExeAudit.res =', res);
				if (res.code == 1) {
					that.getApplyList()
					let title = '提示'
					let content = (audit == 1) ? '已通过！' : '已拒绝！'
					uni.showModal({ title, content, showCancel: false })
				} else {
					this.$toast(res.msg || '数据异常')
				}
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

			timestampToDateFormat(ts) {
				return timestampToDateFormat(1000 * ts)
			}

		}
	}
</script>

<style scoped>
	.tab_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88rpx;
	}

	.tab_item {
		flex-grow: 1;
		text-align: center;
		height: 100%;
		line-height: 88rpx;
	}

	.tab_txt {
		font-size: 28rpx;
		font-weight: normal;
		color: #222;
	}

	.tab_txt_sel {
		font-size: 28rpx;
		font-weight: bold;
		color: #1890FF;
	}

	.truck_item {
		margin: 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.op_menu_div {
		display: flex;
		justify-content: flex-end;
		padding: 24rpx 14rpx 14rpx 14rpx;
	}

	.btn_share {
		background-color: #1890FF;
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 4rpx;
		margin: 0 0 0 12rpx;
	}
</style>